<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 1500px;
            /* background-color: rgb(255, 215, 163); */
            height: 2000px;
            margin: 0 auto;
        }

        #bd1 {
            height: 100px;
            background: rgb(255, 255, 255) url("../../img/logo.png") no-repeat 120px 30px;
        }

        #sou {
            vertical-align: top;
            position: relative;
            top: 30px;
            left: 1000px;
            width: 200px;
            height: 30px;
        }

        #bd1im {
            background-color: rgb(255, 255, 255);
            width: 45px;
            height: 32px;
            position: relative;
            top: 30px;
            left: 1000px;
            /* float: right; */
            /* margin-right: 20px; */
        }
        #bd2 {
            height: 60px;
            background-color: rgb(31, 31, 31);
            margin: 0 auto;
        }
        #b2ul {
            width: 1120px;
            height: 60px;
            margin: 0 auto;
            
            /* background-color: aliceblue; */

        }
        #b2ul>li {
            box-sizing: border-box;
            width: 140px;
            height: 60px;
            float: left;
            /* background-color: rgb(84, 84, 84); */
            /* margin-left: 22px; */
            font-size: 17px;
            color: #fbfbfb;
            text-align: center;
            line-height: 60px;
            border-right:1px solid rgb(148, 148, 148) ;
        }
        #b2ul>li:nth-child(8)
        {
            border-right: 0px;
        }
        #bd4{
            width: 1500px;
            height: 500px;
            background: url("https://picsum.photos/1500/500?random=1");
            margin: 0 auto;
        }
        #bd3{
            width: 1150px;
            background-color: aquamarine;
            overflow: hidden;
            margin: 0 auto;
        }
        #bd3>div{
            float: left;
        }
        #bd3d1{
                    width: 550px;
                    height: 300px;
                    background-color: #fbfbfb;
        }
        #bd3d2{
            width: 300px;
            height: 300px;
            background-color: #d2d2d2;
        }
        #bd3d3{
            width: 300px;
            height: 300px;
            background-color: #fbfbfb;
        }
        #bd3d1>ul{
            margin-top:30px;
        }
        #bd3d1>ul>li{
            
            /* background-color: #fbfbfb; */
            /* margin: 0 auto; */
            margin:10px 0 0 20px;
            font-size: 16px;
        }
        #bd3d1>ul>li>span{
            float: right;
            margin-right: 20px;
            color: #808080; 
        }
        #bd3p1{
            margin: 20px 0 0 20px;
            font-size: 20px;
        }
        #bd3p2{
            margin: 20px 0 0 20px;
            font-size: 20px;
        }
        #bd3p3{
            margin: 20px 0 0 20px;
            font-size: 20px;
        }
        #bd3p21{
            margin: 30px 0 0 20px;
            text-align: justify;
            color: #777777;
        }
        #bd3p22{
            margin: 30px 0 0 20px;
            text-align: justify;
            color: #101010;
        }
        #bd3p31{
            margin: 60px 0 0 20px;
            text-align: justify;
            color: #414141;
        }
        #bd5{
            box-sizing: border-box;
            width: 1150px;
            margin:  0 auto;
            margin-top: 20px;
            height: 300px;
            /* background-color: #e1e1e1; */
            border: 1px solid transparent;
        }
        #bd5p{
            margin: 20px 0 0 20px;
            font-size: 20px;
        }
        #bd5>div{
            box-sizing: border-box;
            width: 250px;
            height: 220px;
            /* border: 1px solid black; */
            float: left;
            margin:10px 18px 0 18px;
        }
        #bd5 img{
            /* width: 250px;
            height: 150px; */
            margin: 0 auto;
            display: block;
        }
        .bd5p{
            text-align: center;
            margin-top: 10px;
            color: #959595;
            font-size: 20px;
       }
       #bd6{
        box-sizing: border-box;
        width: 1500px;
        overflow: hidden;
        /* margin:  0 auto; */
        height: 400px;
        background-color: #e7e7e7;
       }
       #bd61{
        float: left;
        width: 750px;
        height: 400px;
        background-color: #ffb6e3;
        font-size: 0px;
       }
       #bd62{float: left;
        width: 300px;
        height: 400px;
        background-color: #abffc4;
       }
       #bd63{float: left;
        width: 450px;
        height: 400px;
        background-color: #ffa3a3;
       }
       #bd6 p{
        margin: 20px 0 0 20px;
        font-size: 20px;
       }
       #bd61>div{
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        width: 250px;
        height: 300px;
        /* border: 1px solid black; */
       }
       #bd61 li{
        font-size: 16px;
        margin: 20px 0 0 20px;
       }
       #bd62 li{
        font-size: 16px;
        margin: 20px 0 0 20px;
       }
       #bd63 li{
        font-size: 16px;
        margin: 20px 0 0 20px;
       }
    </style>
</head>

<body>
    <div id="box">
        <div id="bd1"><input id="sou" placeholder="SEARCH..."><img id="bd1im" src="../../img/搜索.png"></div>
        <div id="bd2">
            <ul id="b2ul">
                <li >集团介绍</li>
                <li >产品中心</li>
                <li >市场市场</li>
                <li >技术研发</li>
                <li >团队合作</li>
                <li >国际合作</li>
                <li >投资者关系</li>
                <li >新闻资讯</li>
            </ul>
        </div>
        <div id="bd4"></div>
        <div id="bd3">
            <div id="bd3d1">
                <p id="bd3p1">公司新闻</p>
                <hr size="1" noshade="none" width="90%" style="margin: 0 auto;">
                <ul>
                    <li>陈建成董事长出席ATB集团召开年度销售大会<span>2013-07-30</span></li>
                    <li>中国电器工业协会分马力电机分会在卧龙召开理事长.<span>2013-07-30</span></li>
                    <li>陈建成董事长访问中国驻德大使馆<span>2013-07-30</span></li>
                    <li>企业文化是企业持续经营的关键要素<span>2013-07-30</span></li>
                    <li>陈建成监事长在ATB集团2013年销售会议上发表重要<span>2013-07-30</span></li>
                    <li>喜迎七一 唱响唱响 年轻力量激发企业持久活力 唱响举..<span>2013-07-30</span></li>
                </ul>
            </div>
            <div id="bd3d2">
                <p id="bd3p2">公司介绍</p>
                <p id="bd3p21">公司成立于1984年经过近30年的发展</p>
                <p id="bd3p22">已成为电气制造,房地产开发和金融人才招聘</p>
            </div>
            <div id="bd3d3">
                <p id="bd3p3">人才招聘</p>
                <p id="bd3p31">培养一流的人才，铸造一流的工程实现员工与企业的共同发展</p>
            </div>
        </div>
        <div id="bd5">
            <p id="bd5p">市场项目</p>
            <div><img src="https://picsum.photos/250/150?random=1"><p class="bd5p">好的老鼠在摸进</p></div>
            <div><img src="https://picsum.photos/250/150?random=2"><p class="bd5p">航天基地飞起来</p></div>
            <div><img src="https://picsum.photos/250/150?random=6"><p class="bd5p">巴克神难民</p></div>
            <div><img src="https://picsum.photos/250/150?random=5"><p class="bd5p">大坝nb</p></div>
        </div>
        <div id="bd6">
            <div id="bd61">
                <p>产品中心</p>
                <hr  size="1" noshade="none" width="90%" style="margin: 0 auto;">
                <div>
                    <ul>
                        <li>产品中心</li>
                        <li>汽车电机</li>
                        <li>日用电机</li>
                        <li>特种电机</li>
                        <li>大功率电机</li>
                    </ul>
                </div>
                <div><ul>
                    <li>工业驱动和自动化</li>
                    <li>高压变频和系统集成</li>
                    <li>漫泥土揽拌机</li>
                    <li>电动车辆</li>
                </ul></div>
                <div><ul>
                    <li>电池电源</li>
                    <li>输变电设备</li>
                    <li>楼盘信总</li>
                    <li>金融产品</li>
                </ul></div>
            </div>
            <div id="bd62">
                <p>技术研发</p>
                <hr size="1" noshade="none" width="90%" style="margin: 0 auto;">
                <ul>
                    <li>技术中心</li>
                    <li>汽车电机</li>
                    <li>日用电机</li>
                </ul>
            </div>
            <div id="bd63">
                <p>销售网络</p>
                <hr size="1" noshade="none" width="90%" style="margin: 0 auto;">
                <ul>
                    <li>研发创新</li>
                    <li>工艺流程</li>
                    <li>营销网络</li>
                    <li>电工设备</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>